<template>
    <div>
   <div class="top">
      <div class="logo">
        <a href="Index.html"
          ><img src="http://192.168.1.146:8088/logo.png"
        /></a>
      </div>
      <div class="search">
        <form>
          <input type="text" v-model="searchProductName" class="s_ipt" />
          <input type="submit" value="搜索" class="s_btn"  @click="searchProduct"/>
        </form>
        <span class="fl">
         
          <router-link v-for="categorytop in categoryList.slice(0, 6)" :key="categorytop.id" :to="{name: 'productOfCategory', query:{id:categorytop.id}}">{{categorytop.name}}</router-link> 
          
          </span>
      </div>
      
      <div class="i_car">
        <div class="car_t">购物车 [ <span>3</span> ]</div>
        <div class="car_bg">
          <!--Begin 购物车未登录 Begin-->
          <div class="un_login" v-if="token==null">
            还未登录！<router-link to="/login" style="color: #ff4e00">马上登录</router-link>
            查看购物车！
          </div>
          <!--End 购物车未登录 End-->
          <!--Begin 购物车已登录 Begin-->
          <ul class="cars">
            <li v-for="car in shoppingCarList" :key="car.product.id">
              <div class="img">
                <router-link  :to="{name:'productDetail', query:{id:car.product.id}}"><img
                     :src="`http://192.168.1.146:8088/${car.product.fileName}`"
                    width="58"
                    height="58"
                /></router-link>
              </div>
              <div class="name">
                <router-link  :to="{name:'productDetail', query:{id:car.product.id}}">
                {{ car.product.name }}
                </router-link>
              </div>
              <div class="price"><font color="#ff4e00">￥    {{ car.product.price }}</font> X{{ car.quantity }}</div>
            </li>
          </ul>
          <div class="price_sum">
            共计&nbsp; <font color="#ff4e00">￥</font><span>1058</span>
          </div>
          <div class="price_a"><a href="#">去购物车结算</a></div>
          <!--End 购物车已登录 End-->
        </div>
      </div>



    </div>
    <!--End Header End-->
    <!--Begin Menu Begin-->
    <div class="menu_bg">
      <div class="menu">
        <!--Begin 商品分类详情 Begin-->
        <div class="nav" @mouseover="isCategory=true" @mouseleave="isCategory=false">
          <div class="nav_t">全部商品分类</div>
          <div class="leftNav" v-show="isPageInfo || isCategory">
            <ul>
              <li v-for="(category1,index) in categoryList" :key="category1.id" @mouseover="showSubCategories(category1)" @mouseleave="hideSubCategories(category1)">
                    	<div class="fj"  > 
                        	<span class="n_img"><span></span><img :src="`http://192.168.1.146:8088/nav${index+1}.png`" /></span>
                            <span class="fl">   <router-link class="category1" :to="{name: 'productOfCategory', query:{id:category1.id}}">  {{category1.name}} </router-link> </span>
                        </div>
                        <div class="zj" v-show="categoryStates[category1.id]">
                            <div class="zj_l">
                                <div class="zj_l_c" v-for="category2 in category1.children" :key="category2.id">
                                    <h2>  <router-link :to="{name: 'productOfCategory', query:{id:category2.id}}"> {{category2.name}}</router-link>  </h2>
                                 <router-link v-for="category3 in category2.children" :key="category3.id" :to="{name: 'productOfCategory', query:{id:category3.id}}">{{category3.name}} | </router-link>
                                </div>
                            </div>
                            <div class="zj_r">
                                <a href="#"><img src="http://192.168.1.146:8088/n_img1.jpg" width="236" height="200" /></a>
                                <a href="#"><img src="http://192.168.1.146:8088/n_img2.jpg" width="236" height="200" /></a>
                            </div>
                        </div>
                  </li>
            </ul>
          </div>
        </div>
        <!--End 商品分类详情 End-->
        <ul class="menu_r">
          <li><router-link to="/">首页</router-link></li>
             <li v-for="categorytop in categoryList.slice(0, 6)" :key="categorytop.id">
              <router-link :to="{name: 'productOfCategory', query:{id:categorytop.id}}">{{categorytop.name}}</router-link> 
              </li>
            </ul>
        <div class="m_ad">中秋送好礼！</div>
      </div>
    </div>
    <router-view></router-view>
    <!--End Menu End-->
</div>

</template>



<script>
export default {
  data() {
    return {
      categoryList: {},
      categoryStates: {},
      isCategory:false,
      isPageInfo:false,
      newsList:{},
      searchProductName:"",
      shoppingCarList:{},
      shoppingCarProductList:{},
      token:null,
    };
  },
  methods: {
    categoryInfo(){
      this.$axios({
        method: "post",
        url: "/api/category/pageInfoCategory",
      })
        .then((rs) => {
         this.categoryList=rs.data.categoryList;
         this.categoryList.forEach((category) => {
            this.$set(this.categoryStates, category.id, false);
          });
        })
        .catch((error) => {
          console.error(error);
        });
      },
      showSubCategories(category) {
      this.$set(this.categoryStates, category.id, true);
    },
    hideSubCategories(category) {
      this.$set(this.categoryStates, category.id, false);
    },checkIsPageInfo(){
      console.log("路径是："+this.$router.currentRoute.path);
      if(this.$router.currentRoute.path === "/"){
        this.isPageInfo=true;
      }else{
        this.isPageInfo=false;
      }
    },searchProduct(){
          if(this.searchProductName.includes(' ')||this.searchProductName==""||this.searchProductName==null){
            alert("输入错误，请重新输入");
            return;
          }
      this.$router.push({
        name: 'productOfCategory', query:{searchProductName:this.searchProductName}
      });
    },getShoppingCar(){
      this.token=sessionStorage.getItem("token") || null;
      if(this.token==null){
        return ;
      }
      this.$axios({
        method:"post",
        data:{
          token:this.token
        },
        url:"api/order/getShoppingCar"
      }).then((rs) => {
        console.log("购物车信息："+rs)
          if(rs.data.result!="购物车无商品"){
            this.shoppingCarList=rs.data.result;
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
  }, watch: {
    "$route.path": function (newPath, oldPath) {
      console.log(`路由从 ${oldPath} 切换到 ${newPath}`);
      this.checkIsPageInfo();
      this.getShoppingCar();
    },
  },
  mounted() {
    this.categoryInfo();
    this.checkIsPageInfo();
    this.getShoppingCar();
  },
};
</script>


<style scoped>
.category1{
color:white;

}


.category1:hover{
  color:black;
}
</style>